<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>订单列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../../../../assets/js/vendor/vue.min.js"></script>
    <script src="../../../../assets/js/vendor/jquery-3.3.1.min.js"></script>
    <script src="../../../../assets/js/plugins/utils.js"></script>
    <script src="../../static/js/admin.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.1/lib/index.js"></script>
</head>

<body>
<div class="weadmin-nav">
			<span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">商品管理</a>
        <a><cite>商品列表</cite></a>
      </span>
    <a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="weadmin-body" id="productItem">
    <div class="layui-row">
        <div class="layui-form layui-col-md12 we-search">
            <div class="layui-inline">
                <input type="text" name="name" id="searchKey" placeholder="请输入商品名称" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" @click="search()"><i class="layui-icon">&#xe615;</i></button>
        </div>
    </div>
    <div class="weadmin-block">
        <button class="layui-btn" onclick="WeAdminShow('添加商品','./add.html')"><i class="layui-icon"></i>添加</button>
        <span class="fr" style="line-height:40px">共有数据：{{page.total}} 条</span>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <th>商品名字</th>
            <th>商品原价</th>
            <th>折扣价</th>
            <th>是否新品</th>
            <th>商品简介</th>
            <th>商品总数</th>
            <th>商品库存</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(product,index) in productList"  v-if="productList!=''">
            <td>{{product.name}}</td>
            <td>{{product.old_price}}</td>
            <td>{{product.new_price}}</td>
            <td>{{product.is_new}}</td>
            <td>{{product.brief_intro}}</td>
            <td>{{product.num}}</td>
            <td>{{product.stock}}</td>
            <td class="td-manage">
                <a title="编辑" @click="show(product.id)" href="javascript:;">
                    <i class="layui-icon layui-icon-edit"></i>
                </a>
                <a title="删除" @click="deleteProduct(product.id)" href="javascript:;">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="block">
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="page.pageNum"
                :page-size="page.pageSize"
                :hide-on-single-page="true"
                layout="total, prev, pager, next"
                :total="page.pages">
        </el-pagination>
    </div>

</div>
<script type="text/javascript">
    var product_list = new Vue({
        el: "#productItem",
        data: {
            productList: [],
            page: {"pageNum": 1, "pageSize": 10, "pages": 0, "total": 0},
            key: '',
        },
        mounted: function () {
            this.getProductList();
        },
        methods: {
            getProductList() {
                $.ajax({
                    url: "/admin/product_search",
                    type: "POST",
                    headers: {
                        "Authorization": "Bearer " + handleLocalStorage("get", "token")
                    },
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        "pageNum": this.page.pageNum,
                        "key": this.key
                    }),
                    success: function (response) {
                        if (response.code == 200) {
                            product_list.productList=response.data.list;
                            product_list.page.pageNum = response.data.pageNum;
                            product_list.page.pageSize = response.data.pageSize;
                            product_list.page.pages = response.data.pages;
                            product_list.page.total = response.data.total;
                            console.log(response);
                        }else {
                        }
                    },
                    error: function (error) {
                        alert("服务器错误");
                    }

                });
            },
            deleteProduct(id) {
                var t = this;
                $.ajax({
                    url: "/admin/delete_product/"+id,
                    type: "GET",
                    headers: {
                        "Authorization": "Bearer " + handleLocalStorage("get", "token")
                    },
                    success: function (response) {
                        alert(response.message);
                        if (response.code == 200) {
                            product_list.getProductList();
                        }
                    },
                    error: function (error) {
                        alert("服务器错误");
                    }
                });
            },
            handleCurrentChange(val) {
                this.page.pageNum = val;
                this.getProductList();
            },
            search() {
                this.page.pageNum = 1;
                this.key = $('#searchKey').val();
                this.getProductList();
            },
            show(id) {
                WeAdminEdit('编辑','./edit.html?id='+id, 2, 600, 400);
            }
        }
    });
</script>
</body>

</html>